<template>
	<div class="clearfix" id="login_wrap">
		<h2 class="title">
			<img src="./lg.png" alt="" />
		</h2>
		<div class="content">
			<div id="login">
				<div class="login--account">
					<span>用户名：</span>
					<input
						type="text"
						placeholder="用户名"
						name="username"
						v-model.trim="username"
					/>
				</div>
				<div class="login--password">
					<span>密码：</span>
					<input
						type="password"
						placeholder="密码"
						name="password"
						v-model.trim="password"
						@keyup.enter="login"
					/>
				</div>
				<p class="login--btn">
					<button id="loginBtn" @click="login">登录</button>
				</p>
				<p class="zhuce--btn">
					<button id="zhuceBtn" @click="zhuce">注册</button>
				</p>
			</div>
		</div>
	</div>
</template>

<script>
import baseUrl from "../../utils/baseURL";
	export default {
		data() {
			return {
				username: "",
				password: "",
			};
		},
		methods: {
			login() {
				// 网络请求
				const _this = this;
				var params = new URLSearchParams();
				params.append("username", _this.username);
				params.append("password", _this.password);
				axios.post(baseUrl+"/login", params).then(function (resp) {
					console.log(resp.data);
					if (resp.data.code == 200) {
						console.log("成功");
						_this.$store.commit("LOGIN_IN", 1);
						let userData = resp.data.data;
						window.localStorage.setItem("userData",JSON.stringify(userData));
						_this.$router.replace({
							path: "/",
						});
					} else if (resp.data.code == 2003) {
						_this.$message({
							message: "用户不存在！",
							type: "warning",
						});
					} else if (resp.data.code == 2002) {
						_this.$message({
							message: "密码错误！",
							type: "warning",
						});
					} else {
						_this.$message({
							message: "登录失败！",
							type: "error",
						});
					}
				});
			
      },
			zhuce() {
				this.$router.push("/zhuce");
			},
		},
		mounted() {},
	};
</script>

<style scoped lang="scss">
	#login_wrap {
		position: relative;
		background: rgba(64, 64, 194, 0.1);
		> h2 {
			text-align: center;
			padding-top: 40px;
			> img {
				width: 150px;
				height: auto;
			}
		}
		> div {
			height: 0;
			padding-top: 190px;
			> div {
				background: #fff;
				max-width: 479px;
				max-height: 400px;
				padding: 30px 60px;
				position: absolute;
				left: 50%;
				transform: translate(-50%, -50%);
				> div {
					padding: 10px 0;
					border-bottom: 1px solid #ddd;
					&.login--account {
						margin: 25px 0 30px;
					}
					span {
						color: #666;
						display: inline-block;
						width: 80px;
						font-size: 20px;
					}
					input {
						background: none;
						font-size: 16px;
						border: none;
						height: 30px;
						width: auto;
						// padding-left: 12px;
						box-sizing: border-box;
						color: #666;
						&.error {
							border: 1px solid #f00;
						}
						&::-webkit-input-placeholder {
							color: #aaa;
						}
					}
				}
				p {
					text-align: right;
					&.login--btn {
						button {
							width: 100%;
							height: 50px;
							font-size: 18px;
							background: rgb(79, 109, 160);
							border: none;
							margin-top: 20px;
							color: #fff;
							border-radius: 6px;
							cursor: pointer;
						}
					}
					&.zhuce--btn {
						button {
							width: 100%;
							height: 50px;
							font-size: 18px;
							background: rgb(233, 233, 233);
							border: none;
							margin-top: 20px;
							color: rgb(79, 109, 160);
							border-radius: 6px;
							cursor: pointer;
						}
					}
					a {
						color: #fff;
						display: inline-block;
						padding: 0 15px;
						font-size: 14px;
					}
				}
			}
		}
	}
</style>
